<!--
 * @Author: your name
 * @Date: 2022-01-15 14:54:11
 * @LastEditTime: 2022-01-20 16:50:57
 * @LastEditors: Please set LastEditors
 * @Description: 结算页面
 * @FilePath: \uniapp\src\pages\pay\index.vue
-->
<template>
  <view class="bodyPay">
    <!-- 一、 地址选择 -->
    <view class="address address-btn u-flex u-row-center" v-if="!address">
      <u-button
        shape="circle"
        type="error"
        plain
        size="medium"
        @click="handleChooseAddress"
        :custom-style="{ backgroundColor: '#fff!important' }"
        >获取收货地址</u-button
      >
    </view>
    <view v-else class="address address-detail">
      <view class="address-detail">{{ addressDetail }}</view>
      <view class="address-user"
        >{{ address.userName }} {{ address.telNumber }}
      </view>
    </view>

    <!-- 二、已选商品 -->
    <view class="commodity goods-list">
      <view class="comTitle goods-list-title">已选商品</view>
      <view class="goods-list-content">
        <view
          class="cart-item"
          v-for="item in checkedCartList"
          :key="item.goods_id"
        >
          <!-- 2 图片 -->
          <view class="goods-img">
            <u-image
              width="191rpx"
              height="191rpx"
              :src="item.goods_small_logo"
            ></u-image>
          </view>
          <!-- 3 信息 -->
          <view class="goods-info">
            <!-- 名称 -->
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <!-- 价格和数量 -->
            <view class="goods-price-num">
              <view class="goods-price">￥{{ item.goods_price }}</view>
              <view class="goods-num-tool">
                <view class="goods-vnum">X{{ item.nums }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 三、统计 -->
    <view class="statistics">
      <view class="all-price">
        合计: <text>￥{{ checkedPrice }}</text>
      </view>
      <view class="all-count">
        <u-button @click="handlePay" type="error" shape="circle"
          >去支付({{ checkedCount }})</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      address: null,
    };
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapGetters("cart", ["checkedCartList", "checkedPrice", "checkedCount"]),
    // 详细地址
    addressDetail() {
      if (!this.address) return "";
      return (
        this.address.provinceName +
        this.address.cityName +
        this.address.countyName +
        this.address.detailInfo
      );
    },
  },
  methods: {
    ...mapActions("user", ["fetchToken"]),
    async handleChooseAddress() {
      const [err, res] = await uni.chooseAddress();
      if (!err) {
        this.address = res;
      }
    },
    // 点击结算按钮
    async handlePay() {
      // 0 判断有没有收货地址
      if (!this.address) {
        uni.showToast({
          title: "您还没有选择收货地址",
          icon: "none",
        });
        return;
      }

      // 1 获取用户信息
      // const [err, { encryptedData, rawData, iv, signature }] =
      //   await uni.getUserProfile({
      //     desc: "用于提供更好的服务",
      //   });
      // 2 获取 code 临时凭据
      // const [err2, { code }] = await uni.login();
      // 3 获取token
      // 后端没有写好代码！！ 正常是每一次获取都是ok！！！以点击两次 为准
      // const { token } = await this.$u.post("/users/wxlogin", {
      //   encryptedData,
      //   rawData,
      //   iv,
      //   signature,
      //   code,
      // });

      // 1、2、3 判断当前有没有token 有 就直接使用 没有 获取 即可！！
      if (!this.token) {
        // 获取token
        await this.fetchToken();
        // this.token =  真正的token
      }

      // 4 准备创建订单要的参数
      const orderParams = {
        order_price: this.checkedPrice,
        // A | B | C
        consignee_addr: `${this.addressDetail}|${this.address.userName}|${this.address.telNumber}`,
        goods: this.checkedCartList.map((item) => ({
          goods_id: item.goods_id,
          goods_number: item.nums,
          goods_price: item.goods_price,
        })),
      };

      // 5 发送请求 获取 订单编号 axios 传参的写法 我不确定！！
      const { order_number } = await this.$u.post(
        "/my/orders/create",
        orderParams
      );

      // 6 创建支付流程 获取支付参数
      const { pay } = await this.$u.post("/my/orders/req_unifiedorder", {
        order_number,
      });

      // 7 调起微信支付
      const res7 = await uni.requestPayment(pay);
    },
  },
};
</script>

<style lang="scss" scoped>
.bodyPay {
  background: #fcfcfc;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  // 选择地址
  .address {
    background-color: rgb(255, 255, 255);
    margin: 21rpx 20rpx 35rpx 20rpx;
    height: 187rpx;
    width: 711rpx;
    position: relative;
  }
  .address-detail {
    .address-detail {
      font-family: PingFangSC-Medium;
      font-size: 35rpx;
      font-weight: 600;
      margin: 0 17rpx 0 29rpx;
      padding-top: 20rpx;
    }
    .address-user {
      font-family: PingFangSC-Medium;
      font-size: 28rpx;
      margin: 0 17rpx 0 29rpx;
      padding-top: 16rpx;
    }
  }
  // 已选商品
  .commodity {
    width: 711rp;
    background-color: #fff;
    margin: 0 19rpx 111rpx 19rpx;
    .comTitle {
      margin: 17rpx 0 26rpx 26rpx;
      font-size: 34rpx;
      font-weight: 600;
      color: #656565;
    }
  }
  .cart-item {
    display: flex;
    padding: 10rpx;
    // border-bottom: 1rpx solid #ccc;

    .goods-img {
      flex: 2;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .goods-info {
      color: #666;
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods-name {
      }

      .goods-price-num {
        display: flex;
        justify-content: space-between;
        .goods-price {
          color: $themeColor;
        }

        .goods-num-tool {
          width: 140rpx;
          height: 40rpx;

          display: flex;
          justify-content: flex-end;

          .goods-vnum {
          }
        }
      }
    }
  }
  // 底部支付合计
  .statistics {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-top: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    padding: 15rpx;
    .all-price {
      flex: 1;
      color: #666;
      text {
      }
    }

    .all-count {
    }
  }
}
</style>